<template>
  <div class="index">
    <el-container>
      <el-header class="bg" :style="bg">
        <el-row :gutter="10">
          <el-col :lg="7" :md="6" :span="7" class="logo">
            <img :src="logo" alt />
          </el-col>
          <el-col :lg="10" :md="12" :span="10" class="search">
            <el-input placeholder="请输入关键字" v-model="input" class="input-with-select">
              <el-button class="append" slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
            <el-row class="tag">
              关键字：
            <template v-for="(i,index) in tag" >
                <el-tag @click.native="tags(index)" :key="index">{{i.name}}</el-tag>
            </template>
            </el-row>
          </el-col>
          <el-col  :lg="7" :md="6" :span="7" >
            <el-row>
              <el-col :span="18" :offset="6" class="person">
                  <el-avatar  class="avatar" :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                  <!-- <img :src="out" alt class="avatar" /> -->
                  <span @click="item=0"><router-link to = '/page/center/cont'>个人中心</router-link></span>
                  <img :src="set" alt class="set" @click="goback"/>
                  <img :src="out" alt class="out" @click="logout"/>
              </el-col>
              <el-col :span="20" :offset="4" class="tab">
                <router-link to = '/page/library/cont'><div @click="router1" :class="item==1?'choose':''">电子图书 </div></router-link>
               <router-link to = '/page/av/cont'> <div @click="router2" :class="item==2?'choose':''">电子音像馆</div></router-link>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="done">
        <transition name="el-fade-in-linear">
             <router-view ref="child" />
        </transition>
      </el-main>
        <el-footer class="footer">安徽萃智信息科技有限公司 版权所有</el-footer>
    </el-container>
  </div>
</template>
 
<script>
import {  removeToken1, removeToken2 } from '@/utils/auth'

import Library  from "@/views/page/library";
import router from '@/router';
export default {
  name: "page",
  components: {
    Library,
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  data() {
    return {
        input:'',
      bg: {
        background:
          "url(" + require("@/assets/index/bg_top.png") + ") no-repeat",
        backgroundSize: "100% 100%",
        height: "180px",
      },
      logo: require("@/assets/index/logo.png"),
      set: require("@/assets/index/set_up.png"),
      out: require("@/assets/index/Shut_down.png"),
      item:1,
      type:0,
      id:null,
      tag:[
        {
          id:5,name:'军事'},
          {id: 6,name:'经济'},
          {id:9,name:'文学'},
          {id:17,name:'农业科技'},
           {id:10,name:'艺术'},
          {id:28,name:'小说'}
      ]
    };
  },
  methods: {
    router1(){
      this.item=1
    },
     router2(){
      this.item=2
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    goback(){
      let type=this.$router.options.routes[3].components
      if(type==''){
         this.$router.push(this.$router.options.routes[3].path+'/'+this.$router.options.routes[3].children[0].path)
      }else{
        //  this.$router.push(this.$router.options.routes[3].path+'/index')
        this.$router.push("/library/index")
      }
    },
    tags(index){
      this.type=1
      this.id=this.tag[index].id
      this.$refs.child.$children[1].form.category_id=this.tag[index].id
      this.$refs.child.$children[1].dataList()
    },
    search(){
  this.$refs.child.$children[1].form.search=this.input
     
     this.$refs.child.$children[1].dataList()
    },
    logout() {
       
      
       localStorage.clear()
        removeToken1()
      removeToken2()

  
       this.$router.push('/login')
    }
  },
};
</script>

<style lang="scss" scoped>
.bg {
  height: 180px;
  padding: 0 70px;
}

.logo img {
  width: 80%;
  margin: 64px auto;
}
.go {
  margin-top: 30px;
}
.goto {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.el-icon-right {
  font-size: 16px;
  color: #fff;
  margin-left: 10px;
}
.search {
  margin-top: 60px;
  text-align: center;
}
.el-input-group {
  width: 80% !important;
}
.search .el-input__inner {
  height: 62px !important;
}
.el-input-group__append,
.el-input-group__prepend {
  border: 0 solid #ddd !important;
}
.append {
  background-color: #ff9600 !important;
  border: none;
  color: #fff !important;
}
.tag {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  padding-top: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.person {
  padding-top: 40px;
  text-align: right;
    font-size:22px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(255,255,255,1);
display: flex;
justify-content: flex-end;
align-items: center;
span{
padding-right: 30px;
}
}
.avatar{
    width: 40px;
   height:40px;
    border-radius: 50%;
    margin-right: 10px;
}
.set{
    padding-right: 30px;
}
.tab{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    div{
        cursor: pointer;
        width: 200px;
        font-size:26px;
    font-family:Microsoft YaHei;
    font-weight:bold;
    color:rgba(255,255,255,1);
    height: 60px;
    line-height: 60px;
    text-align: center;
    }
    div:hover{
        color: rgba(255,150,0,1);
    }
}
.choose{
   width:200px;
height:60px;
background:rgba(255,150,0,1);
border-radius:20px 20px 0px 0px; 
color: #fff !important;
}
.footer{
height:50px !important;
background:rgba(25,103,106,1);
text-align: center;
line-height: 50px;
font-size:20px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(255,255,255,1);
}

</style>
<style lang="scss">
.name{
  padding-bottom: 16px;
}
.point{
  padding-bottom: 16px;
}
.info{
  padding-bottom: 20px;
}
.search .el-input__inner {
  height: 62px;
}
.append {
  height: 62px;
  width: 80px;
}
.append i {
  font-size: 20px;
}
.tag .el-tag {
  width: 66px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.17);
  margin-right: 16px;
  border-style: unset;
  cursor: pointer;
  text-align: center;
}
.tab .el-button{
    width:200px;
height:60px;
background:rgba(255,150,0,1);
border-radius:20px 20px 0px 0px;
}
.done{
  padding: 0;
}
.annotationLayer {
  background-color: rgba(0,0,0.3);
}
.el-col-md-10{
  .search .el-input__inner {
    height: 45px !important;
}
}
@media only screen and (min-width: 992px){
.el-col-md-10 {
    width: 41.66667%;
}
.el-col-md-10{
  .search .el-input__inner {
    height: 45px !important;
}
}
}
</style>